<template>
  <div class="offShelf">
    <div class="common-loading" v-show="loadings.form">
      <van-loading type="spinner" color="#ed6d00" />
    </div>
    <van-nav-bar title="质检下架" left-text="返回" @click-left="goBack"></van-nav-bar>
    <van-form :show-error-message="false" class="common-form">
      <van-field
        ref="locationCode"
        id="locationCode"
        v-model="locationCode"
        name="库位"
        label="库位"
        placeholder="请扫描库位"
        :rules="[{required: true, message: '请扫描库位'}]"
        @keydown.enter.native="!pdaScanData.data ? handleLocationNo() : ''"
        @focus="disableKeyboard('locationCode')"
        @click="disableKeyboard('locationCode')"
        :readonly="readOnlys.locationCode"
      />
      <van-field
        ref="cartonNumber"
        id="cartonNumber"
        v-model="cartonNumber"
        name="箱号"
        label="箱号"
        placeholder="请扫描箱号"
        @keydown.enter.native="!pdaScanData.data ? handleCartonNo() : ''"
        @focus="disableKeyboard('cartonNumber')"
        @click="disableKeyboard('cartonNumber')"
        :readonly="readOnlys.cartonNumber"
        :rules="[{required: true, message: '请扫描箱号'}]"
      />
    </van-form>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {validateLocationCode, doTakeout} from "@/api/biz/quality/quality.js";
export default {
  name: "OffShelf",
  data() {
    return {
      locationId: "",
      locationCode: "",
      cartonNumber: "",
      readOnlys: {
        locationCode: false,
        cartonNumber: false
      },
      loadings: {
        form: false
      }
    };
  },
  watch: {
    pdaScanData: {
      handler(data) {
        let input = document.activeElement.id;
        if (input == "locationCode") {
          this.locationCode = data.data;
          this.handleLocationNo();
        } else if (input == "cartonNumber") {
          this.cartonNumber = data.data;
          this.handleCartonNo();
        }
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters("scanner", ["pdaScanData"]),
    ...mapGetters("user", ["userData"]),
    storerId() {
      return this.$root.storerWarehouseBrand.storerId;
    },
    wareHouseId() {
      return this.$root.storerWarehouseBrand.warehouseId;
    },
    brandId() {
      return this.$root.storerWarehouseBrand.brandId;
    }
  },
  mounted() {
    this.$refs.locationCode.focus();
  },
  methods: {
    check() {
      let arry = ["locationCode", "cartonNumber"];
      let flag = true;
      arry.forEach(item => {
        if (flag && !this[item]) {
          flag = false;
        }
      });
      return flag;
    },
    // 禁用键盘
    disableKeyboard(name) {
      this.readOnlys[name] = true;
      setTimeout(() => {
        this.readOnlys[name] = false;
      }, 200);
    },
    // 箱号事件
    handleCartonNo() {
      if (!this.check()) {
        this.cartonNumber = "";
        return;
      }
      let params = {
        storerId: this.storerId, // "货主ID",
        wareHouseId: this.wareHouseId, // "仓库ID",
        brandId: this.brandId, // "品牌ID",
        locationId: this.locationId, // "库位ID",
        cartonNumber: this.cartonNumber, // "箱号",
        loginName: this.userData.sysUserLoginName // "操作人名称"
      };
      this.loadings.form = true;
      doTakeout(params)
        .then(response => {
          this.loadings.form = false;
          if (response.data.status) {
            // 成功操作
            this.$toast.success(response.data.message);
          } else {
            this.$toast.fail(response.data.message);
          }
          this.cartonNumber = "";
        })
        .catch(() => {
          this.loadings.form = false;
          this.cartonNumber = "";
          this.$toast.fail("请求出错！");
        });
    },
    handleLocationNo() {
      if (!this.locationCode) {
        this.cartonNumber = "";
        return;
      }
      let params = {
        storerId: this.storerId, // "货主ID",
        wareHouseId: this.wareHouseId, // "仓库ID",
        brandId: this.brandId, // "品牌ID",
        locationCode: this.locationCode // "库位Code"
      };
      this.loadings.form = true;
      validateLocationCode(params)
        .then(response => {
          this.loadings.form = false;
          if (response.data.status) {
            // 成功操作
            this.locationId = response.data.data.locationId;
            this.cartonNumber = "";
            this.$nextTick(() => {
              this.$refs["cartonNumber"].focus();
            });
          } else {
            this.$toast.fail(response.data.message);
            this.locationCode = "";
            this.cartonNumber = "";
          }
        })
        .catch(() => {
          this.loadings.form = false;
          this.locationCode = "";
          this.cartonNumber = "";
          this.$toast.fail("请求出错！");
        });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>
